<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义滚动条</title>
    <style>
        #parent {
            width: 600px;
            height: 20px;
            background: #ccc;
            margin: 10px auto;
            position: relative;
        }
        #div2{background: rgb(210, 255, 45);
             /*width: 300px;height: 300px;filter:alpha(opacity=0);opacity: 0; 控制大小和透明度 */
             border:1px solid black;
             width: 400px;height: 300px;
             padding: 10px;
             position: relative;
             overflow: hidden;
        }
        #div3{position: absolute;top:0;left: 0;}
        #div1 {
            width: 30px;
            height: 20px;
            position: absolute;
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oParent=document.getElementById('parent');
            var oDiv2 = document.getElementById('div2');
            var oDiv3 = document.getElementById('div3');
            //鼠标在元素上的位置
            var disX = 0;
            //鼠标按下
            oDiv.onmousedown = function (ev) {//ev 是获取鼠标位置
                var oEvent = ev || event;
                disX = oEvent.clientX - oDiv.offsetLeft;
                //鼠标移动(当移动时，就可以进一步的计算元素的位置(根据新的鼠标位置))
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    if (l < 0) {
                        l = 0;
                    } else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
                        l = oParent.offsetWidth - oDiv.offsetWidth;
                    }
                    oDiv.style.left = l + 'px';
                    document.title = l/570;
                    var scale = l/(oParent.offsetWidth - oDiv.offsetWidth);
                    //变宽高
                    // oDiv2.style.width = 300*scale+'px';
                    // oDiv2.style.height = 300*scale+'px';
                    //变透明
                    //oDiv2.style.filter = 'alpha(opacity="+scale*100+")';
                    //oDiv2.style.opacity = scale;
                    oDiv3.style.top = -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
                }

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            };
        }
    </script>
</head>

<body>
    <div id="parent">
        <div id="div1"></div>
    </div>
    <div id="div2">
        <div id="div3">
                发展简史编辑
                UGC时期
                百度百科历史首页图片
                百度百科历史首页图片(11张)
                百度百科是百度在2006年4月20日推出第三个基于搜索平台建立的社区类产品，这是继百度贴吧、百度知道之
                后，百度再度深化其知识搜索体系 [2]  。
                2007年1月10日，百科首页第一次改版。新增百科任务、百科之星、上周贡献榜等栏目。
                2007年4月2日，百科蝌蚪团正式成立，4月10日，百科蝌蚪团第一批成员出现，4月26日蝌蚪团首页上线。
                百科词条数增长情况
                百科词条数增长情况(2张)
                2007年4月19日，词条页面改版，改良词条页面的行高和行宽，在词条页面的底部增加了汉英词典解释，改进历史版本页
                面；5月百科编辑词条积分调整；6月开放分类检索升级，历史版本增加翻页功能，百科优质版本标准
                出台；9月高级编辑器上线，百科任务改版。11月百科推出相关词条，可以在百度知道里搜索到百科词
                条。（百度百科历史首页图片相册图片来源： [3]  ）
                2008年1月16日百度百科的第100万个词条诞生。
                2008年4月21日，百度百科正式版上线，首页增加优质版本榜，优质词条栏目 [3]  ；8月28日，百
                科帮助页更新，增加词条编辑原则；9月18日，词条浏览页升级 [4]  。
                百度百科周年庆活动图片
                百度百科周年庆活动图片(29张)
                2009年9月15日，百度百科积分系统正式从百度知道中分离，拥有单独的一套积分体系。2009年12月29日，百科分类管理员主页上线。
                2010年1月18日 百度百科登上百度首页， [5]  此次调整也意味着百科业务在百度版图中的地位上升。
                2010年4月9日至11日 百度百科首次邀请33位用户齐聚北京共庆百度百科四周年。（百度百科周年庆活动
                图片图册图片来源：）
                2011年1月，“知识先锋”百度百科校园计划上线，这一计划是百度百科与全国重点高校合作开展的社会实
                践互动项目。（百度百科相关主题活动图片图册图片来源： [6]  ）
                平台化
                2012年5月18日百度百科数字博物馆正式上线，此举打破了以往网络上单纯以图片、文字为主的博物馆展
                品呈现模式，通过音频讲解、实境模拟、立体展现等多种形式，让用户通过互联网即可身临其境般地观赏
                展品，更平等便捷地了解历史文化。 [7-8] 
                2012年9月百科学术委员会权威上线，推动百度百科“专业精英+热情网民”模式为广大用户提供更为全面
                、系统、专业、权威的知识分享服务。
                百度百科相关主题活动图片
                百度百科相关主题活动图片(17张)
                2012年11月首个城市百科成都站上线 [9]  ；城市百科为城市打造独特的城市网络名片，通过线上线
                下相结合的推广手段，有效的带动城市相关内容的建设，让更多的人了解这座城市。
                2013年9月25日新版词条页上线，这是自2008年以来词条页进行的第3次改版，也是词条浏览页变化
                最大的一次。11月4日百科商城全新升级，各团队专区全部合并，且统一使用财富值兑换礼品。11月1
                8日百科任务系统上线，在该任务平台，活动的发起、参与编辑、词条评审等全由科友负责，任务自主
                性更高， 这是百科用户团队及词条编辑评审的一次重大改革和进步。
                2014年5月14日新版明星百科词条页升级上线，打破了以往枯燥的百科阅读方式，打造出一站式的明
                星信息聚合平台。 [10] 
                2014年9月12日，“词媒体”平台的百度百科全新改版上线，通过引入包括博物馆、书法家协会、卫计
                委等大量PGC资源，城市百科、明星百科等特型内容聚合页，百度百科突破了传统百科全书的模式
                局限，借助权威合作、词条质量优化、视觉升级、强化社会化协作等措施。 [11] 
                2014年12月5日，最高人民法院与百度联手，将全国各法院的详细准确信息发布在百度百科上，并以
                “中国法院地图”的形式集合呈现。承接最高人民法院在信息化上的新举措，作为全球最大的中文百科全
                书的百度百科，将成为全国法院大全的权威平台。 [12] 
                史记·2014
                史记·2014
                2014年12月底，推出百科年度总结篇《史记·2014》，以总榜单和分类特色榜单的形式盘点2014年的年度热词。
                2015年2月9日，百度百科全球最大的海洋馆网上直播上线。 [13]  4月1日，正式对外发布百度
                百科“行业名人词条”。“行业名人词条的建立，将为各行业名人与普通民众之间搭起桥梁，在互联网
                上去伪存真，建立最权威、真实、全方位展现当代行业名人风貌的信息库，成为个人品牌打造的新始发
                站。4月7日，百度百科陕西数字方志馆上线。 [14-15] 
                2015年5月，百科个人中心改版，透过百度百科的“数字窗口”，让人们能够更便捷地认知世界。 [16] 
                2015年7月15日，百度百科“艺术百科”正式上线，将艺术家、艺术作品、高品质的艺术展览等权
                威信息集合呈现到每个网民的面前，依托百度搜索强大的资源和百科大量的艺术家词条信息，简洁
                、快速、精准得到感兴趣的艺术类信息。7月21日，百度百科“科普中国·科学百科”专题上线，结合百度百
                科强大的平台影响力以及中国科协14个学会及国内顶尖专家资源，在互联网上开辟出了一块丰富权威的科
                普阵地。 [17]  9月，百度百科上线“二战百科”专题，为中国人民抗日战争及世界反法西斯战争胜利70周年纪念日，推出再现历史的专题报道。
                2015年12月27日，百度百科与房教中国在“第二届房教中国地产人年会暨第八届中国房地产策划
                师年会”上宣布正式合作，双方签署《关于地产百科战略合作协议》，携手打造打造专门针对地产垂直领域的“地产百科”。 [18] 
                2015年12月29日，百科推出《史记·2015》，在“史记2015”中，百度百科勇敢打破旧有模式，
                以三大主题:“殇.生之逝”、“耀.国之盛”、“鸣.民之声”，深度展现2015大事件。
                2016年4月28日，百度百科上线10周年发布会在京举行。会上百度百科全面展示了互联网知识
                平台的十年成就：累计创建词条1300多万，参与词条编辑的网友超过580万，每32秒诞生一个新词条。
                同时，百度百科正式发布了全新的产品“秒懂百科”。 [19] 
                2016年8月22日下午，百度百科推出公益项目“萤火虫计划”，主要利用百度百科的内容结合VR、
                AR等技术，消除地理地域带来的限制，为贫困地区的学生提供知识获取途径，由王珞丹出任
                公益大使。 [20] 
                2017年12月27日，百度百科全新发布了大数据分析产品“百度数说”。百度数说将借助百度人工
                智能能力，让大数据更加开放、透明和体系化。百度数说利用百度AI能力对整个全网数据，
                包括搜索数据、社交数据以及各个行业数据还有媒体数据进行全面的整合和计算，最终帮助大数据用户去
                呈现这些结构化、可视化、直观的数据报告。 [21] 
                CHCD2018设计创意奖
                CHCD2018设计创意奖

                2018年5月，百度百科数字博物馆全面升级，正式更名为百度百科博物馆计划。7月，法国枫
                丹白露宫与百度百科签署合作协议。 [22]  9月13日，百度依托人工智能技术与多种空间图像技术的深
                度融合完成了《百度AI追寻：未消失的西南联大》西南联大数字复原项目，获得了第二届国际数字遗产案例
                竞赛设计创意奖。 [23]  9月14日，百度百科与墨西哥、奥地利、德国三国代表在百度大厦共同签署MOU（合作备忘录），
                就共同在华推广墨、奥、德三国的文化，推动百度百科博物馆计划在墨、奥、德三国合作落
                地和影响力的提升达成共识。 [24] 
        </div>
    </div>
</body>

</html>